
<template>
  <div>
    <div class="wrap">
      <div class="nav1" :class="{ hua: index === 1 }"
         v-for="(item, index) in list" :key="index" >
        <div class="navItem" @touchmove="move"  @click="chang(item, nav, $event, index)" v-for="(nav, numa) in item.List1" 
        :key="numa" :class="{ active: nav.id === 1 }"> {{ nav.name }} </div>
    </div>
          <!-- 移动高亮 -->
      <!-- <div class="tran" :style="{ '--transform': transformVar, '--width': widthVar }"
          :class="{ active: index == num }" ></div> -->
      <!--滑块 -->
      <div class="tran1" :class="{active:true}" :style="{ '--transform1': transformVar1, '--width1': widthVar1 }" ></div>
    <div class="tran2" :class="{active:true}" :style="{ '--transform2': transformVar2, '--width2': widthVar2 }" ></div>
    <div class="tran3" :class="{active:true}" :style="{ '--transform3': transformVar3, '--width3': widthVar3 }"  ></div>
    <div class="tran4" :class="{active:true}" :style="{ '--transform4': transformVar4, '--width4': widthVar4 }"  ></div>
    <div class="tran5" :class="{active:true}" :style="{ '--transform5': transformVar5, '--width5': widthVar5 }"  ></div>
    </div>
    <div class="list">
      <div class="list1">排列方式</div>
      <div class="list2">宫格</div>
    </div>
    <!-- 图片列表 -->

    <div class="imgList">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="lode"
      >
        <a
          class="imgItem"
          :href="item.url"
          v-for="(item,index) in navList"
          :key="index"
        >
          <img :src="item.artwork" />
          <div class="title">{{ item.title }}</div>
          <span class="article">{{ item.content_text }}</span>
        </a>
      </van-list>
    </div>
  </div>
</template>

<script>
import { getStory, getList } from "@/api";
export default {
  name: "VipStory",
  data() {
    return {
      num: 0,
      navList: [], //初始图片列表
      imgList: [], //图片列表总列表
      list: [], //文字列表
      offset: 0, //移动的出事距离
      transformVar1: "translateX(0px)",
      transformVar2: "translateX(0px)",
      transformVar3: "translateX(0px)",
      transformVar4: "translateX(0px)",
      transformVar5: "translateX(0px)",
      widthVar1: "",
      widthVar2: "",
      widthVar3: "",
      widthVar4: "",
      widthVar5: "",
      finished: false,
      loading: false,
      offset:0
    };
  },
  mounted() {
    // 获取图片数据
    this.getData();
    // 获取列表数据
    this.getList();
  },
  methods: {
    // 获取图片数据
    async getData() {
      let result = await getStory();
      this.navList = result.StoryData.slice(0, 9);
      this.imgList = result.StoryData;
    },
    move(event){
      // console.log(this.offset,event.target.getBoundingClientRect().left);
      console.log(event);
    },
    // 改变列表样式
    chang(item, nav, event, index) {
      if(index==1){
        this.offset = event.target.getBoundingClientRect().left;
      }
      if(index ==0){
        this.widthVar1 = event.target.offsetWidth + "px";
      }else if(index == 1){
        this.widthVar2 = event.target.offsetWidth + "px";
      }else if(index == 2){
        this.widthVar3 = event.target.offsetWidth + "px";
      }else if(index == 3){
        this.widthVar4 = event.target.offsetWidth + "px";
      }else if(index == 4){
        this.widthVar5 = event.target.offsetWidth + "px";
      }

      let b = event.target.getBoundingClientRect().left;
      let a = this.offset;
      this.transformVar = b - a;
      this.offset = b;
      this.num = index;
      if(index ==0){
        this.transformVar1 = `translateX(${b - 20}px)`;
      }else if(index == 1){
        this.transformVar2 = `translateX(${b - 20}px)`;
      }else if(index == 2){
        this.transformVar3 = `translateX(${b - 20}px)`;
      }else if(index == 3){
        this.transformVar4 = `translateX(${b - 20}px)`;
      }else if(index == 4){
        this.transformVar5 = `translateX(${b - 20}px)`;
      }
    },
    // 获取列表数据
    async getList() {
      const result = await getList();
      this.list = result.getList;
    },

    // 加载图片
    lode() {
      setTimeout(() => {
        let a = this.imgList.slice(10, 19);

        this.navList.push(...a);
        // 加载状态结束
        this.loading = false;
        if (this.navList.length > 30) {
          this.finished = true;
        }
      }, 1000);
    },
  },
  // computed:{
  //   list(){
  //     return this.imgList.slice(0,9)
  //   }
  // }
};
</script>

<style lang="less">
// 整体样式
.wrap {
  width: 375px;
  height: 165px;
  border-bottom: 1px solid #eee;
  margin-bottom: 10px;
  position: relative;
}
.tran1 {
  position: absolute;
  top: 0px;
  left: 18px;
  // top: 10px;
  width: var(--width1, 68px);
  // width: 60px;
  height: 25px;
  z-index: 2;
  opacity: 0.5;
  color: #f19617;
  background-color: rgb(245, 223, 178);
  border-radius: 5px;
  transition: all 1s;
  &.active {
    transform: var(--transform1);
  }
}
.tran2 {
  position: absolute;
  // width: 60px;
    top: 34px;
  left: 18px;
  width: var(--width2, 68px);
  height: 25px;
  z-index: 2;
  opacity: 0.5;
  color: #f19617;
  background-color: rgb(245, 223, 178);
  border-radius: 5px;
  transition: all 1s;
  &.active {
    transform: var(--transform2);
  }
}
//滑块设置
.tran3 {
  position: absolute;
      top: 66px;
  left: 18px;
  // top: 10px;
  width: var(--width3, 68px);
  // width: 60px;
  height: 25px;
  z-index: 2;
  opacity: 0.5;
  color: #f19617;
  background-color: rgb(245, 223, 178);
  border-radius: 5px;
  transition: all 1s;
  &.active {
    transform: var(--transform3);
  }
}
.tran4 {
  position: absolute;
      top: 98px;
  left: 18px;
  // top: 10px;
  // width: 60px;
  width: var(--width4, 68px);
  height: 25px;
  z-index: 2;
  opacity: 0.5;
  color: #f19617;
  background-color: rgb(245, 223, 178);
  border-radius: 5px;
  transition: all 1s;
  &.active {
    transform: var(--transform4);
  }
}
.tran5 {
  position: absolute;
  // top: 10px;
      top: 130px;
  left: 18px;
  // width: 60px;
  width: var(--width5, 68px);
  height: 25px;
  z-index: 2;
  opacity: 0.5;
  color: #f19617;
  background-color: rgb(245, 223, 178);
  border-radius: 5px;
  transition: all 1s;
  &.active {
    transform: var(--transform5);
  }
}
// 文字列表
.nav1 {
  display: flex;
  margin: 8px 15px;
  overflow: hidden;
  position: relative;
  overflow-y: hidden;
  overflow-x: scroll;
  &::-webkit-scrollbar {
    display: none;
  }
  // &.hua {
  //   position: relative;
  //   left: 20px;
  // }
  // .tran {
  //   position: absolute;
  //   // top: 10px;
  //   width: var(--width, 68px);
  //   height: 25px;
  //   z-index: 2;
  //   opacity: 0.5;
  //   color: #f19617;
  //   background-color: rgb(245, 223, 178);
  //   border-radius: 5px;
  //   transition: all 1s;
  //   &.active {
  //     transform: var(--transform);
  //   }
  // }
  .navItem {
    display: inline-block;
    height: 25px;
    white-space: nowrap;
    line-height: 25px;
    padding: 0 10px;
    font-size: 12px;
    position: relative;
    z-index: 1;
    // &.active::before {
    //   content: '';
    //   position: absolute;
    //   // top: 10px;
    //   width: 90%;
    //   height: 90%;
    //   left: 0;
    //   z-index: 0;
    //   opacity: 0.5;
    //   color: #f19617;
    //   background-color: rgb(245, 223, 178);
    //   border-radius: 5px;
    //   // transition: all 1s;
    //   // transform: var(--transform2);
    // }
  }
}
// 列表样式文字
.list {
  width: 100%;
  font-size: 12px;
  color: #999;
  padding: 0 20px;
  box-sizing: border-box;
  margin-bottom: 30px;
  .list1 {
    float: left;
  }
  .list2 {
    float: right;
  }
}
// 图片列表
.imgList {
  display: flex;
  width: 375px;
  // height: 100%;
  flex-wrap: wrap;
  .van-list {
    display: flex;
    width: 375px;
    // height: 100%;
    flex-wrap: wrap;
    .imgItem {
      display: flex;
      flex-direction: column;
      width: 80px;
      font-size: 14px;
      margin: 10px 20px;
      img {
        width: 80px;
        height: 80px;
      }
      .title {
        display: inline-block;
        margin: 10px;
        width: 80px;
        color: #666;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .article {
        color: #999;
        width: 80px;
        text-align: center;
      }
    }
  }
}
</style>
